<template>
	<view class="">
		<view class="display pad-tb-30 bordbottom bgfff pad-lr-30" @click="goshopdetails(shop.id)">
			<image class="wid-hig-120" :src="shop?.image_text"></image>
			<view class="ml20 right_view">
				<view class="fontSize-28">{{shop?.name}}</view>
				<view class="mar-top-40 fontSize-26">{{shop?.address}}</view>
			</view>
		</view>
		<view class="row a-center pad-tb-20 pad-lr-20 mar-top-30 bgfff pad-lr-30">
			<view class="flex1 row j-sb">
				<view class="w-per25" :class="tab_index1===index?'c-333333':'c-666666'" v-for="(item,index) in tabs1" :key="index" @tap="changeTab1(index)">
					{{item.text}}
				</view>
				<view class="w-per25 row a-center" @tap="changeSort">
					<text class="mr10">价格</text>
					<view class="column a-center">
						<view class="">
							<tm-icon name="tmicon-arrow-sortdown-smal" class="trfrom" fontSize="26" :color="price_sort===0?'#333':'#D9D9D9'"></tm-icon>
						</view>
						<view class="">
							<tm-icon name="tmicon-arrow-sortdown-smal" fontSize="26" :color="price_sort===1?'#333':'#D9D9D9'"></tm-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="display-sb align-items flex-wrap mar-top-10 pad-lr-30">
			<view class="radius-16 over-hid bgfff pad-lr-12 pad-tb-12 goods_list mar-top-20" v-for="item in goods_list" :key="item.id" @click="gogoodsdetails(item.id)">
				<image :src="item.image_text" class="wid-hig-320" mode=""></image>
				<view class="mar-top-14">
					<view class="text-clamp-2 fontSize-28">
						<!-- <text class="col-f tag_view radius-4 fontSize-22" :style="'background:'+item.label_array?.color">{{item.label_array?.name}}</text> -->
						<text class="col-f tag_view_two radius-4 fontSize-22" v-if="item.is_limit==1">限购</text>
						{{item.name}}
					</view>
					<view class="display-sb align-items mar-top-14">
						<view class="fontSize-30 col-DB3231"><text class="fontSize-22">￥</text>{{item.price}}</view>
						<view class="col-6 fontSize-26">销量{{item.total_sales>999?'999+':item.total_sales}}</view>
					</view>
				</view>
			</view>
			<view class="display-ce align-items width-100" v-if="goods_list.length==0">
				<tm-result :showBtn="false" subTitle=" " title="暂无数据" color="#2DB295"></tm-result>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {shopInfo,goodsList} from '@/utils/api'
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad((options)=>{
	shop_id.value = options.id
	_shopInfo()
	_goodsList()
})
const shop_id = ref()
const shop = ref()
const _shopInfo=()=>{
	shopInfo({id:shop_id.value}).then(res=>{
		if(res.code==1){
			shop.value = res.data.shop
		}
	})
}
const tabs1 =ref([{value:1,text:'综合'},{value:2,text:'销量'},{value:3,text:'新品'},])
const tab_index1 = ref(0)
const price_sort = ref(1)//价格排序 0升1降.
const goods_list = ref([])//商品列表
const page = ref(1)
 // 宫格 筛选
 const sort = ref(1)
const changeTab1=(index)=>{
	tab_index1.value = index;
	sort.value = tabs1.value[tab_index1.value].value;
	price_sort.value = 1;
	page.value = 1;
	goods_list.value = []
	_goodsList();
}
const _goodsList = () =>{
	goodsList({	page:page.value,
				limit:10,
				sort:sort.value,
				shop_id:shop_id.value
	}).then(res=>{
		if(res.code==1){
			goods_list.value =goods_list.value.concat(res.data.goods.data)
			if(res.data.goods.data.length>0){
				page.value++
			}
		}
	})
}
const gogoodsdetails =(id:number) =>{
	uni.navigateTo({
		url:'/indexpages/goodsDetail/goodsDetail?id='+id
	})
}
const goshopdetails = (id:number) =>{
	uni.navigateTo({
		url:'/indexpages/shopdetails/shopdetails?id='+id
	})
}
</script>

<style lang="scss">
page{
	background:#f1f1f1;
}
.bordbottom{
	border-bottom: 2rpx solid #f1f1f1;
}
.right_view{
	width:calc(100% - 140rpx)
}
.trfrom{
	.tmicon-arrow-sortdown-smal{
		transform: rotate(180deg) !important;
	}
}
</style>
